<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="${APP_PATH}/static/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=""${APP_PATH}/static/js/jquery.js"></script>

<script language="javascript">
$(function(){	
	//导航切换
	$(".imglist li").click(function(){
		$(".imglist li.selected").removeClass("selected")
		$(this).addClass("selected");
	})	
})	
</script>

<script>  

$(function () {
	//全选或全不选
	$("#all").click(function(){   
    	if(this.checked){   
        	$("#list :checkbox").prop("checked", true);  
    	}else{   
		$("#list :checkbox").prop("checked", false);
    	}   
 	}); 
	//全选  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
	//全不选
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反选 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
		 allchk();
    });
	
	//设置全选复选框
	$("#list :checkbox").click(function(){
		allchk();
	});
 
	//获取选中选项的值
	$("#getValue").click(function(){
		var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
			valArr[i] = $(this).val();
        });
		var vals = valArr.join(',');
      	alert(vals);
    });
}); 
function allchk(){
	var chknum = $("#list :checkbox").size();//选项总个数
	var chk = 0;
	$("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全选
		$("#all").prop("checked",true);
	}else{//不全选
		$("#all").prop("checked",false);
	}
}
</script>
<script>
$(function(){  
    $("#shanchu").click(function() {
        $("input[name='test']:checked").each(function() { // 遍历选中的checkbox
            n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            $("table#list").find("tr:eq("+n+")").remove();
        });
    });
}); 
</script>





<script type="text/javascript">
$(document).ready(function(){
  $(".click").click(function(){
  $(".tip").fadeIn(200);
  });
  
  $(".tiptop a").click(function(){
  $(".tip").fadeOut(200);
});

  $(".sure").click(function(){
  $(".tip").fadeOut(100);
});

  $(".cancel").click(function(){
  $(".tip").fadeOut(100);
});

});
</script>



<style>




</style>
</head>


<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">警员信息</a></li>
    </ul>
    </div>
    
<div class="rightinfo">
    
    <div class="tools">
    
    	<ul class="toolbar">
        <li class="click"><span><img src="images/t01.png" /></span>添加</li>
        <li class="click"><span><img src="images/t02.png" /></span>修改</li>
        <li  id="shanchu"><span><img src="images/t03.png" /></span>删除</li>
      
        </ul>
        
        
    
    
    </div>
    
    
  <table class="imgtable" id="list">  
    <tr class="imgtable1">
    <td  width="100px;">选择</td>
    <td>姓名</td>
    <td>警号</td>
    <td>询问室</td>
    <td>登记时间</td>
    <td>当前位置</td>
    <td>确认离开</td>
    </tr>
    <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>张三</td>
    <td>3674888</td>
    <td>询问室一</td>
    <td>2016-10-23 11：10：11</td>
    <td>走廊</td>
    <td><input name="button" type="submit" class="btn" id="button" value="确认离开" /></td>
    </tr>
   
     <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>李四</td>
    <td>3674888</td>
    <td>192.168.1.0</td>
    <td>2016-10-23 11：10：11</td>
    <td>卫生间</td>
    <td><input name="button" type="submit" class="btn" id="button" value="确认离开" /></td>
    </tr>
    
      <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>王五</td>
    <td>3674888</td>
    <td>192.168.1.0</td>
    <td>2016-10-23 11：10：11</td>
    <td>走廊</td>
    <td><input name="button" type="submit" class="btn" id="button" value="确认离开" /></td>
    </tr>

    
    </table>
    
    
    
    
    
   
    <div class="pagin">
    	<div class="message">共<i class="blue">1256</i>条记录，当前显示第&nbsp;<i class="blue">2&nbsp;</i>页</div>
        <ul class="paginList">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
        <li class="paginItem"><a href="javascript:;">1</a></li>
        <li class="paginItem current"><a href="javascript:;">2</a></li>
        <li class="paginItem"><a href="javascript:;">3</a></li>
        <li class="paginItem"><a href="javascript:;">4</a></li>
        <li class="paginItem"><a href="javascript:;">5</a></li>
        <li class="paginItem more"><a href="javascript:;">...</a></li>
        <li class="paginItem"><a href="javascript:;">10</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
        </ul>
    </div>
    
    
    
    
    
  <div class="tip">
    	<div class="tiptop"><span>提示信息</span><a></a></div>
        
      <div class="tipinfo">
        <span><img src="images/ticon.png" /></span>
        <div class="tipright">
        <p>是否确认对信息的修改 ？</p>
        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
        </div>
        
        <div class="tipbtn">
        <input name="" type="button"  class="sure" value="确定" />&nbsp;
        <input name="" type="button"  class="cancel" value="取消" />
        </div>
    
    </div>
    
    
    
    
    </div>
    
    <div class="tip">
    	<div class="tiptop"><span>添加警员信息</span><a></a></div>
 
        
        <div style="text-align:center; margin:auto">
        
        
        <table width="650" border="1" class="zdgl" style=" margin:auto">
  <tr>
    <td colspan="6" class="textleft1">基本信息：</td>
  </tr>
  <tr>
    <td class="textleft">姓名</td>
    <td><input name="" type="text" /></td>
    <td class="textleft" >警号</td>
    <td class="textleft"><input name="" type="text" /></td>
    <td class="textleft">发卡卡号</td>
    <td><input name="" type="text" /></td>
  </tr>
    <tr>
      <td class="textleft">带领人数</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">单位</td>
    <td colspan="3" class="textleft" ><input name="" type="text" style=" width:386px" /></td>
    
  </tr>
    </tr>
    <tr>
    <td colspan="6" class="textleft1">权限：</td>
  </tr>
    <tr>
    <td class="textleft"><span class="kv-content">询问室</span></td>
   <td class="textleft" colspan="5"><label for="select"></label>
     <select name="select" id="select" style=" background-color:#E6E6E6; width:150px; height:30px; padding-left:5px; line-height:30px">
       <option>询问室一</option>
       <option>询问室二</option>
       <option>询问室三</option>
       <option>询问室四</option>
       <option>询问室五</option>
       <option>询问室六</option>
       <option>询问室七</option>
       <option>询问室八</option>
     </select></td>
  </tr>
   

</table>



</div>

<div class="tipinfo">
        <span><img src="images/ticon.png" /></span>
        <div class="tipright">
        <p>是否确认对信息的添加 ？</p>
        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
      </div>
        
        <div class="tipbtn">
        <input name="" type="button"  class="sure" value="确定" />&nbsp;
        <input name="" type="button"  class="cancel" value="取消" />
        </div>
    
    </div>
    
<script type="text/javascript">
	$('.imgtable tbody tr:odd').addClass('odd');
	</script>
    
</body>

</html>
